<style>
  .container{
    height: 100%;
    width: 100%;
    background: #3AB4FF;
  }
  .center{
    display: table-cell;
    vertical-align: middle;

  }
  .center_cell{

  }
  .login_con{
    width: 380px;
    height: 450px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
  }
  .login_con img{
    width: 30px;
  }
  .center_input{
    margin: 0 auto;
    width: 250px;
  }
  .item_style:first-child{
    margin-top: 20px;
  }
  .item_style{
    margin-bottom: 25px;
    position: relative;
  }

  .checkmark{
    position: absolute;
    top:10px;
    left:320px;

  }
</style>
<template>
  <div class="container" style="width: 1920px;height: 1080px;">
    <div class="center" style="width: 1920px;height: 800px;/*background: green*/">
      <div class="login_con">
        <div class="item_style"><img src="../../images/logo.png" alt=""></div>
        <div class="item_style"><h1>管理系统</h1></div>
        <div class="item_style">
          <Input class="center_input email" v-model="userData.username" placeholder="邮箱">
            <span slot="prepend">邮箱</span>
          </Input>
          <span class="checkmark">
            <Icon type="checkmark-circled" v-show='email_success' style="color: green"></Icon>
            <Icon type="close-circled" v-show='email_err' style="color: red"></Icon>
          </span>
        </div>
        <div class="item_style">
          <Input class="center_input" v-model="userData.tel" placeholder="电话">
          <span slot="prepend">电话</span>
          </Input>
          <span class="checkmark">
            <Icon type="checkmark-circled" v-show="tel_success" style="color: green"></Icon>
            <Icon type="close-circled" v-show="tel_err" style="color: red"></Icon>
          </span>
        </div>
        <div class="item_style">
          <Input class="center_input" v-model="userData.pwd" type="password" placeholder="密码">
          <span slot="prepend">密码</span>
          </Input>
          <span class="checkmark">
            <Icon type="checkmark-circled" v-show='pwd_success' style="color: green"></Icon>
            <Icon type="close-circled" v-show="pwd_err" style="color: red"></Icon>
          </span>
        </div>
        <div class="item_style">
          <Input class="center_input" v-model="userData.repwd" type="password" placeholder="再次确认密码">
          <span slot="prepend">重复密码</span>
          </Input>
          <span class="checkmark">
            <Icon type="checkmark-circled" v-show="repwd_success" style="color: green"></Icon>
            <Icon type="close-circled" v-show="repwd_err" style="color: red"></Icon>
          </span>
        </div>
        <div class="item_style">
          <div style="margin-bottom: 10px;">
            <span slot="prepend">已有账号?<a @click="goLogin">登陆</a></span>
          </div>

          <Button @click="register" type="success" >注册</Button>
          <Button @click="reset()" type="info">重置</Button>
        </div>
      </div>
      <div class="center_cell"><span>Power By JLCS Copyright@2017 All rights Reserved</span></div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        email_success:false,
        email_err:false,
        tel_success:false,
        tel_err:false,
        pwd_success:false,
        pwd_err:false,
        repwd_success:false,
        repwd_err:false,
        userData:{
          username:'918872152@qq.com',
          pwd:'12345667890',
          repwd:'12345667890',
          tel:'13880316721',
        }
      }
    },
    methods:{
      goLogin(){
        this.$router.push({name:'login'})
      },
      register(){
        console.log('注册开始');
        //
        console.log(this.userData);
        //验证
        if(this.userData.username=='918872152@qq.com'){
          //邮箱
          this.email_success = true;
          this.email_err = false;
          this.tel_success = true;
          this.tel_err = false;
          this.pwd_success = true;
          this.pwd_err = false;
          this.repwd_success = true;
          this.repwd_err = false;
        }else{
          this.email_err = true;
          this.email_success = false;
          this.tel_err = true;
          this.tel_success = false;
          this.pwd_err = true;
          this.pwd_success = false;
          this.repwd_err = true;
          this.repwd_success = false;
        }
        //验证通过
        //请求
        this.$http.post('url',this.userData).then((res)=>{
          console.log('请求成功')
          console.log(res);
        }).catch((err)=>{
          console.log(err);
        })

      },
      reset(){
        this.userData= {
          username:'',
          pwd:'',
          repwd:'',
          tel:'',
        }
          this.email_success=false,
          this.email_err=false,
          this.tel_success=false,
          this.tel_err=false,
          this.pwd_success=false,
          this.pwd_err=false,
          this.repwd_success=false,
          this.repwd_err=false
      },
      emailFormat(){
        console.log('验证邮箱')
      }
    }
  }
</script>
